<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>预览文档</title>
</head>
<style>
  html,
  body {
    height: 100%;
    width: 100%;
  }

  * {
    margin: 0;
    padding: 0;
  }

  #app {
    width: 100%;
    height: 100%;
    display: flex;
  }

  .common-auto {
    width: 100%;
    height: 100%;
  }
</style>

<body>
  <div id="app">
    <div class="common-auto">
      <iframe class="common-auto" :src="iframeSrc"></iframe>
    </div>
  </div>
  <script src="./vue.js"></script>
  <script src="./axios.js"></script>
  <!-- <script src="https://unpkg.com/axios/dist/axios.min.js"></script> -->
  <!-- <script src="https://cdn.bootcdn.net/ajax/libs/axios/1.2.5/axios.min.js"></script> -->
  <script>
    let vm = new Vue({
      el: '#app',
      data() {
        return {
          iframeSrc: "",
          fileEngine: 1, // 默认是走永中
          Authorization: "bearer eyJhbGciOiJSUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyX25hbWUiOiJhZG1pbiIsInNjb3BlIjpbImFsbCJdLCJleHAiOjE2NzUxMDI3MjQsImF1dGhvcml0aWVzIjpbInVzZXIiXSwianRpIjoiT0dIWk5qdVFJaUh5UnRTZHR2el81ang5cTh3IiwiY2xpZW50X2lkIjoiYWRtaW4iLCJ0b2tlbiI6ImxvZ2luX3Rva2VuXzE2MTk5NDMxNzUxODE1NjE4NTYifQ.m-exwnhJrDy7SRKnrll6kRPEfdr5tLQgGbmXoYMHUZPQ4av8FRE9ht6lDUHsyUVHXLpzAUbYZb5hK9L3Rtxxpd3m6opOylSsYX-Ipw1bjJUlXGoAwEJp-GF1ptu-uS3-dEKsKUdlHtnCeyM1qtADv7DF-Kkk2MOpGkllbH1BVr5w51JGzT6JPGY93ALYMZQYIFnqk7Lf_iyoTh7oam8y2a29g5kGTj0t9xLBaN_n_mHhxBaFdSw0_RxJwQfYKdJ_gaw7JnI5qeeavTFKOOPvajKC6Rs8_aW6PXiSpu99RhqJ0jsp-b3f0BgpKnMauzHWPbwiIVpW4jS7jd8ERYthww",
          baseUrl: "",
        }
      },
      mounted() {
        // let documentObj = {
        //   fileUploadRecordId: "1606097772378120192",
        //   format: "doc",
        // };
        // this.previewType(documentObj);
      },
      methods: {
        // document参数 fileUploadRecordId -- 文件id  format --文件格式  Authorization --权限
        // 预览方式
        previewType111(documentObj) {
          // 是pdf直接预览
          if (documentObj.format.toLowerCase() === "pdf") {
            let url = `http://172.18.1.140:8181/api/oss/info/${documentObj?.fileUploadRecordId}`;
            axios({
              url,
              method: "GET",
              headers: {
                Authorization: documentObj.Authorization,
              },
            }).then((res) => {
              let previewUrl = encodeURIComponent(res.data?.data?.url);
              let fileName = res.data?.data?.originalFilename;
              this.iframeSrc = `./pdf/web/viewer.html?file=${previewUrl}&previewTitle=江汉水网&fileName=${fileName}`;
            })
          } else {
            // 获取系统配置的文件引擎再决定走哪一种预览方式
            axios({
              url: "http://172.18.1.140:8181/api/system/sys-config/getFileEngine",
              method: "GET",
              headers: {
                Authorization: documentObj.Authorization,
              },
            }).then((res) => {
              this.fileEngine = res?.data?.data;
              if (this.fileEngine == 1) {
                this.filePreviewByYz(documentObj);
              } else {
                this.filePreviewPdf(documentObj);
              }
            });
          }
        },
        // 文件转pdf预览方法
        async filePreviewPdf(documentObj) {
          if (!documentObj?.fileUploadRecordId) return;
          let url = `http://172.18.1.140:8181/api/project/file-transform?fileId=${documentObj?.fileUploadRecordId}`;
          axios({
            url,
            method: "POST",
            responseType: "blob",
            headers: {
              Authorization: documentObj.Authorization,
            },
          }).then((res) => {
            let binaryData = [];
            let previewUrl = "";
            if (res.data.type == "application/json") {
              let reader = new FileReader();
              reader.onload = () => {
                let { result } = reader;
                let errorInfo = JSON.parse(result);
                this.pitUtils.pitMessage(errorInfo.msg, "error");
              };
              reader.readAsText(res.data);
              return false;
            }
            let type = "application/pdf;charset=utf-8";
            binaryData.push(res.data);
            let blob = new Blob(binaryData, { type: type });
            previewUrl = window.URL.createObjectURL(blob);
            // this.iframeSrc = previewUrl;
            this.iframeSrc = `./pdf/web/viewer.html?file=${encodeURIComponent(
              previewUrl,
            )}&previewTitle=江汉水网&fileName=${documentObj.originalFilename || ""
              }`;
          });
        },
        // 文件走永中预览
        async filePreviewByYz(documentObj) {
          if (!documentObj?.fileUploadRecordId) return;
          let url = `http://172.18.1.140:8181/api/oss/officePreview/${documentObj?.fileUploadRecordId}`
          axios({
            url,
            method: "GET",
            headers: {
              Authorization: documentObj.Authorization,
            },
          }).then((res) => {
            this.iframeSrc = res.data?.data?.url;
          })
        },
      },
    })

    // 预览文件
    function previewType(data) {

      let documentObj = JSON.parse(data);
      //documentObj 参数 fileUploadRecordId -- 文件id  format --文件格式  Authorization --权限token   url --- 地址  originalFilename  -- 文件名
      // 是pdf直接预览
      if (documentObj.format.toLowerCase() === "pdf") {
        //      url:   http://172.18.1.140:8181/
        let url = `${documentObj.url}api/oss/info/${documentObj?.fileUploadRecordId}`;

        axios({
          url,
          method: "GET",
          headers: {
            Authorization: documentObj.Authorization,
          },
        }).then((res) => {
          let previewUrl = encodeURIComponent(res.data?.data?.url);
          let fileName = res.data?.data?.originalFilename;
          vm._data.iframeSrc = `${documentObj.webViewUrl}pdf/web/viewer.html?file=${previewUrl}&previewTitle=江汉水网&fileName=${fileName}`;
        }).catch((err) => {
        })
      } else {
        // 获取系统配置的文件引擎再决定走哪一种预览方式
        axios({
          url: `${documentObj.url}api/system/sys-config/getFileEngine`,
          method: "GET",
          headers: {
            Authorization: documentObj.Authorization,
          },
        }).then((res) => {
          vm._data.fileEngine = res?.data?.data;
          if (vm._data.fileEngine == 1) {
            filePreviewByYz(documentObj);
          } else {
            filePreviewPdf(documentObj);
          }
        });
      }
    };
    // 文件转pdf预览方法
    function filePreviewPdf(documentObj) {
      if (!documentObj?.fileUploadRecordId) return;
      let url = `${documentObj.url}api/project/file-transform?fileId=${documentObj?.fileUploadRecordId}`;
      axios({
        url,
        method: "POST",
        responseType: "blob",
        headers: {
          Authorization: documentObj.Authorization,
        },
      }).then((res) => {
        let binaryData = [];
        let previewUrl = "";
        if (res.data.type == "application/json") {
          let reader = new FileReader();
          reader.onload = () => {
            let { result } = reader;
            let errorInfo = JSON.parse(result);
            <!--                this.pitUtils.pitMessage(errorInfo.msg, "error");-->
          };
          reader.readAsText(res.data);
          return false;
        }
        let type = "application/pdf;charset=utf-8";
        binaryData.push(res.data);
        let blob = new Blob(binaryData, { type: type });
        previewUrl = window.URL.createObjectURL(blob);
        // this.iframeSrc = previewUrl;
        vm._data.iframeSrc = `${documentObj.url}?file=${encodeURIComponent(
          previewUrl,
        )}&previewTitle=江汉水网&fileName=${documentObj.originalFilename || ""
          }`;
      });
    }
    // 文件走永中预览
    function filePreviewByYz(documentObj) {
      if (!documentObj?.fileUploadRecordId) return;
      let url = `${documentObj.url}api/oss/officePreview/${documentObj?.fileUploadRecordId}`
      axios({
        url,
        method: "GET",
        headers: {
          Authorization: documentObj.Authorization,
        },
      }).then((res) => {
        vm._data.iframeSrc = res.data?.data?.url;
      })
    }

  </script>
</body>

</html>